<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- vue使用v-on:xxx 绑定标签的事件 -->
        <button v-on:click="showInfo()">点我提示信息</button>
        <!-- 事件的简写方法 @事件名="函数" -->
        <button @click="showInfo()">点我提示信息</button>
        <!-- 没有参数的时候可以省略括号 -->
        <button @click="showInfo">点我提示信息111</button>

        <!-- <button @click="showInfo1(66,$event)">点我提示信息111</button> -->

        <input type="text" @keydown="showInfo1(66,$event)">点我提示信息2221</input>

    </div>

</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                name: 'zs'
            }
        },
        methods: {//配置方法  各个函数在配置对象中作为属性
            showInfo: () => {
                this.name = '老六';
                console.log('执行方法', this)
            },
            showInfo1(num, event) {
                //事件对象的属性
                // console.log(event.target.innerText);
                console.log(event);
                if (event.keyCode == 13) {
                    console.log("我要提交了")
                }

            }

        }
    })

</script>